<template>
    <div  style="margin-top: 100px;margin-left: 100px;margin-bottom: 20px;">
      <div align="center" style="margin-top: 100px">
          <div id="chart" style="width: 800px; height: 300px"></div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Age_ratio_1",
      mounted() {
        var dom = document.getElementById('chart');
        var chart = this.$echarts.init(dom);
        var option = {title: {
            text: '观影年龄比例'
          },
          tooltip: {},
          legend: {
            data:['年龄比例']
          },
          xAxis: {
            data: ["10-20岁","20-30岁","30-40岁","40-50岁"]
          },
          yAxis: {},
          series: [{
            name: '年龄比例',
            type: 'bar',
            data: [30, 40, 10, 20]
          }]
        };
        // 使用刚指定的配置项和数据显示图表
        chart.setOption(option);
      }
    }
</script>

<style scoped>
   .el-progress{
     width:40% ;
     float: right;
   }
</style>
